@import "../_mixins.less";

:host {
  --toggle-size: 14px;
  --toggle-padding: 4px;
  --toggle-width: calc(var(--toggle-size) + 2*var(--toggle-padding));
}

.bk-input {
  padding-right: max(var(--padding-horizontal), var(--toggle-width));
}

.bk-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--toggle-width);
  height: 100%;
  padding: 0 var(--toggle-padding);
  background-color: var(--icon-color);
  .mask-image(var(--bokeh-icon-see-off));
  .mask-size(var(--toggle-size) var(--toggle-size));
  .mask-position(center center);
  .mask-repeat(no-repeat);
  cursor: pointer;
}

.bk-toggle.bk-visible {
  .mask-image(var(--bokeh-icon-see-on));
}
